<template>
  <div class="fen">
    <!-- 头部 -->
    <div class="title">
      <van-nav-bar
        title="我的积分"
        left-arrow
        @click-left="$router.push('/my')"
      />
    </div>

    <!-- 积分 -->
    <div class="Thebalanceof">
      <div class="Thebalanceof_centent">
        <div class="centent_nav">
          <span>当前积分</span>
          <div class="shuoming" @click="$router.push('/jifentwo')">
            <van-icon name="question" />
            积分说明
          </div>
        </div>

        <!-- 剩余积分 -->
        <div class="cententfen"><span>0</span> <i>分</i></div>

        <!-- 积分按钮 -->
        <div class="van_button">
          <van-button type="warning" color="#fe6d47" block @click="show = true"
            >积分兑换商品</van-button
          >
          <van-dialog v-model="show" overlay="false">
            <div class="tanchuang">
              <p class="icon"><van-icon name="warning-o" /></p>
              <p>快去下单领取大量积分吧</p>
            </div>
          </van-dialog>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="details">
      <div class="txt">最近30天积分记录</div>
      <div class="pic">
        <img src="../assets/积分.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

<style lang="less" scoped>
.fen {
  background-color: #f5f5f5;
}
.title {
  color: #fff;
  /deep/.van-nav-bar {
    background-color: #3190e8;
    .van-nav-bar__title {
      color: #fff;
    }
    .van-icon-arrow-left {
      color: #fff;
    }
  }
}
/deep/.van-ellipsis {
  font-weight: 700;
  font-size: 20px;
}
/deep/.van-nav-bar__arrow {
  font-size: 20px;
}
.Thebalanceof {
  height: 220px;
  background-color: #3190e8;
  padding: 0 5px;
  font-size: 12px;
  .Thebalanceof_centent {
    height: 200px;
    background-color: #ffffff;
    border-radius: 5px;
    .centent_nav {
      display: flex;
      justify-content: space-between;
      padding: 10px 10px 0 10px;
      .shuoming {
        color: #3190e8;
      }
      span {
        font-size: 18px;
        color: #666;
      }
    }
    .cententfen {
      margin-top: 10px;
      padding-left: 10px;
      span {
        font-size: 40px;
      }
      i {
        font-size: 16px;
      }
    }
  }
}
.van_button {
  margin-top: 20px;
  padding: 0 10px;
}
.details {
  color: #a6a6a6;
  font-size: 12px;
  line-height: 40px;
  padding: 0 0 0 10px;
  .pic {
    text-align: center;
  }
  .txt {
    font-size: 20px;
  }
}
.tanchuang {
  text-align: center;
  p {
    text-align: center;
    font-size: 20px;
    margin: 25px auto;
  }
  /deep/.van-icon {
    color: #f8cb86;
    font-size: 120px;
  }
}
/deep/.van-dialog__confirm {
  background-color: #4cd964;
  color: #fff;
  font-size: 25px;
  font-weight: 700;
}
</style>